<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular Mask Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_pt-br.js"></script>
	<script src="../releases/angular-input-masks-dependencies.js"></script>
	<script src="../releases/angular-input-masks.js"></script>
	<script>
		angular.module('demo', ['ui.utils.masks'])
			.controller('ctrl', function ctrl($scope) {
				$scope.numberWith2Decimals = -1234.178;
				$scope.percentageWithDefaultDecimals = 0.7654;

				$scope.initializedCpf = '35244457640';
				$scope.initializedCnpj = '13883875000120';
				$scope.initializedCpfCnpj1 = '56338332958';
				$scope.initializedCpfCnpj2 = '23212161000144';

				$scope.defaultMoney = 153.12;
				$scope.negativeMoney = -153.12;
				$scope.moneyStartedWith0 = 0;
				$scope.moneyInitializedWithString = '3.53';

				$scope.initializedPhoneNumber = '3133536767';

				$scope.initializedCep = '30112010';

				$scope.states = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA',
					'MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR',
					'RS','SC','SE','SP','TO'];
				$scope.fixedStateIE = '0623079040081';
				$scope.initializedState = 'SP';
				$scope.initializedIE = 'P3588747709710';

				$scope.initializedDateMask = new Date();
				$scope.initializedWithISOStringDateMask = (new Date()).toISOString();
			});
	</script>
</head>
<body ng-app="demo">
	<form name="form" ng-controller="ctrl">
		<h2>ui-number-mask</h2>
		<input type="text" name="field21" ng-model="numberWithoutGroupSep" ui-number-mask ui-hide-group-sep> <br>
		<span ng-bind="numberWithoutGroupSep"></span> - {{form.field21.$error}}
		<br>
		<input type="text" name="field" ng-model="numberWithDefaultDecimals" ui-number-mask> <br>
		<span ng-bind="numberWithDefaultDecimals"></span>
		<br>
		<input type="text" name="field2" ng-model="numberWith2Decimals" ui-number-mask="2" ui-negative-number> <br>
		<span ng-bind="numberWith2Decimals"></span> - (accepts negative numbers. Press '-' to test)
		<br>
		<input type="text" name="field3" ng-model="numberWith3Decimals" ui-number-mask="3" min="3.8" max="numberWith2Decimals"> <br>
		<span ng-bind="numberWith3Decimals"></span> {{form.field3.$error}}
		<br>
		<input type="text" name="field4" ng-model="numberWith0Decimals" ui-number-mask="0" min="numberWith3Decimals"> <br>
		<span ng-bind="numberWith0Decimals"></span> - {{form.field4.$error}}
		<br>
		Number: <input type="text" name="field23" ng-model="numberWithDynamicDecimals" ui-number-mask="decimals">
		Decimals: <input type="text" name="field22" ng-model="decimals" ui-number-mask=0><br>
		<span ng-bind="numberWithDynamicDecimals"></span> - {{form.field23.$error}}
		<br>

		<h2>ui-percentage-mask</h2>
		$viewValue - <input type="text" name="field5" ng-model="percentageWithDefaultDecimals" ui-percentage-mask> <br>
		$modelValue - <span ng-bind="percentageWithDefaultDecimals"></span>
		<br>
		<input type="text" name="field6" ng-model="percentageWith4Decimals" ui-percentage-mask="4" min="percentageWithDefaultDecimals" max="115"> <br>
		<span ng-bind="percentageWith4Decimals"></span> - {{form.field6.$error}}
		<br>
		Percentage: <input type="text" name="field25" ng-model="percentWithDynamicDecimals" ui-percentage-mask="pdecimals">
		Decimals: <input type="text" name="field26" ng-model="pdecimals" ui-number-mask=0><br>
		<span ng-bind="percentWithDynamicDecimals"></span> - {{form.field25.$error}}
		<br>
		<h4>ui-percentage-value</h4>
		$viewValue - <input type="text" name="field6" ng-model="percentageValue" ui-percentage-mask="4" ui-percentage-value min="percentageWithDefaultDecimals" max="115"> <br>
		$modelValue - <span ng-bind="percentageValue"></span>
		<h4>ui-percentage-mask without space before %</h4>
		$viewValue - <input type="text" name="field29" ng-model="percentageValueNoSpace" ng-model-options="{allowInvalid:true}" ui-percentage-mask="2" ui-percentage-value ui-hide-space min="percentageWithDefaultDecimals" max="115"> <br>
		<br />

		<h2>ui-br-cpf-mask</h2>
		<input type="text" name="field7" ng-model="initializedCpf" ui-br-cpf-mask> <br>
		<span ng-bind="initializedCpf"></span> - {{form.field7.$error}}<br>
		<input type="text" name="field8" ng-model="fieldCpf" ui-br-cpf-mask> <br>
		<span ng-bind="fieldCpf"></span> - {{form.field8.$error}}<br>

		<h2>ui-br-cnpj-mask</h2>
		<input type="text" name="field9" ng-model="initializedCnpj" ui-br-cnpj-mask> <br>
		<span ng-bind="initializedCnpj"></span> - {{form.field9.$error}}<br>
		<input type="text" name="field10" ng-model="fieldCnpj" ui-br-cnpj-mask> <br>
		<span ng-bind="fieldCnpj"></span> - {{form.field10.$error}}<br>

		<h2>ui-br-cpfcnpj-mask</h2>
		<input type="text" name="field11" ng-model="initializedCpfCnpj1" ui-br-cpfcnpj-mask> <br>
		<span ng-bind="initializedCpfCnpj1"></span> - {{form.field11.$error}}<br>
		<input type="text" name="field12" ng-model="initializedCpfCnpj2" ui-br-cpfcnpj-mask> <br>
		<span ng-bind="initializedCpfCnpj2"></span> - {{form.field12.$error}}<br>
		<input type="text" name="field13" ng-model="cpfcnpj" ui-br-cpfcnpj-mask> <br>
		<span ng-bind="cpfcnpj"></span> - {{form.field13.$error}}<br>

		<h2>ui-money-mask</h2>
		<input type="text" name="field14" ng-model="defaultMoney" ui-money-mask> <br>
		<span ng-bind="defaultMoney"></span> - {{form.field14.$error}}<br>
		<input type="text" name="negativeMoney" ng-model="negativeMoney" ui-money-mask ui-negative-number> <br>
		<span ng-bind="negativeMoney"></span> - {{form.negativeMoney.$error}}<br>
		<input type="text" name="moneyField" ng-model="moneyStartedWith0" ui-money-mask> <br>
		<span ng-bind="moneyStartedWith0"></span> - {{form.moneyField.$error}}<br>
		<input type="text" name="moneyField2" ng-model="moneyInitializedWithString" ui-money-mask> <br>
		<span ng-bind="moneyInitializedWithString"></span> - {{form.moneyField2.$error}}<br>
		<input type="text" name="field15" ng-model="money3Decimals" ui-money-mask="3" min="defaultMoney" max="field16"> <br>
		<span ng-bind="money3Decimals"></span> - {{form.field15.$error}}<br>
		<input type="text" name="field16" ng-model="field16" ui-money-mask="0"> <br>
		{{field16}} - {{form.field16.$error}}
		<br>
		Money: <input type="text" name="field27" ng-model="moneyWithDynamicDecimals" ui-money-mask="mdecimals">
		Decimals: <input type="text" name="field28" ng-model="mdecimals" ui-number-mask=0><br>
		<span ng-bind="moneyWithDynamicDecimals"></span> - {{form.field27.$error}}
		<br>
		<h4>ui-money-mask without space after currency symbol</h4>
		Money: <input type="text" name="field30" ng-model="moneyWithDynamicDecimals" ui-hide-space ui-money-mask="mdecimals">

		<br>
		<h4>ui-money-mask with currency after value</h4>
		Money: <input type="text" name="field31" ng-model="defaultMoney" ui-currency-after ui-money-mask="mdecimals" currency-symbol="EUR">

		<h2>ui-br-phone-number</h2>
		<input type="text" name="phoneNumber" ng-model="phoneNumber" ui-br-phone-number-mask><br>
		<span ng-bind="phoneNumber">-</span> - {{form.phoneNumber.$error}}<br>
		<br>
		<input type="text" name="initializedPhoneNumber" ng-model="initializedPhoneNumber" ui-br-phone-number-mask><br>
		<span ng-bind="initializedPhoneNumber">-</span> - {{form.initializedPhoneNumber.$error}}<br>
		<br>

		<h2>ui-br-cep-mask</h2>
		<input type="text" name="field17" ng-model="initializedCep" ui-br-cep-mask><br>
		<span ng-bind="initializedCep"></span> - {{form.field17.$error}}<br>
		<br>
		<input type="text" name="field18" ng-model="cep" ui-br-cep-mask><br>
		<span ng-bind="cep"></span> - {{form.field18.$error}}<br>
		<br>

		<h2>ui-br-ie-mask</h2>
		<input type="text" name="field24" ng-model="fixedStateIE" ui-br-ie-mask="'MG'"><br>
		<span></span>MG: <span ng-bind="fixedStateIE"></span> - <span ng-bind="form.field24.$error | json"></span><br>
		<br>
		<select ng-model="initializedState" ng-options="state for state in states"></select>
		<input type="text" name="field19" ng-model="initializedIE" ui-br-ie-mask='initializedState'><br>
		<span ng-bind="initializedState"></span>: <span ng-bind="initializedIE"></span> - <span ng-bind="form.field19.$error | json"></span><br>
		<br>
		<select ng-model="state" ng-options="state for state in states">
			<option value="">--</option>
		</select>
		<input type="text" name="field20" ng-model="inscEst" ui-br-ie-mask="state"><br>
		<span ng-bind="state"></span>: <span ng-bind="inscEst"></span> - <span ng-bind="form.field20.$error | json"></span><br>
		<br>

		<h2>ui-br-car-plate-mask</h2>
		<input type="text" name="field25" ng-model="carPlate" ui-br-car-plate-mask><br>
		<span></span>Plate: <span ng-bind="carPlate"></span> - <span ng-bind="form.field25.$error | json"></span><br>
		<br>

		<h2>ui-date-mask</h2>
		<input type="text" name="field26" ng-model="initializedDateMask" ui-date-mask><br>
		<span></span>Date: <span ng-bind="initializedDateMask"></span> - <span ng-bind="form.field26.$error | json"></span><br>
		<br>
	</form>
</body>
</html>
